<template>
  <div class="box5">
    <div class="title">
      <p>未来7天游客趋势图</p>
      <img src="../../images/dataScreen-title.png" alt="" />
    </div>
    <div class="charts" ref="chartsRef"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as echarts from "echarts";

const chartsRef = ref();
onMounted(() => {
  const myCharts = echarts.init(chartsRef.value);
  myCharts.setOption({
    // 标题
    title: {},
    xAxis: {
      type: "category",
      // 两侧不留白
      boundaryGap: false,
      // 分割线去除
      splitLine: { show: false },
      data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
    },
    yAxis: {
      splitLine: { show: false },
      // 轴线设置
      axisLine: {
        show: true,
      },
      // 轴线刻度
      axisTick: {
        show: true,
      },
    },
    grid: {
      left: 70,
      top: 20,
      right: 30,
      bottom: 30,
    },
    series: [
      {
        type: "line",
        data: [120, 1240, 66, 2299, 324, 878, 1245],
        // 平滑曲线设置
        smooth: true,
        // 区域填充样式
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "red", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "blue", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],
  });
});
</script>

<style scoped lang="scss">
.box5 {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: url(../../images/dataScreen-main-cb.png) no-repeat;
  background-size: 100% 100%;
  padding: 10px;
  margin-left: 10px;
  margin-top: 10px;
  .title {
    // 让标题区域保持固定高度
    height: 60px;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    margin-left: 20px;

    p {
      font-size: 22px;
      font-weight: bold;
      color: #ffffff;
    }

    img {
      width: 80px;
      height: auto;
    }
  }
  .charts {
    flex: 1; // 自动填满剩余空间
    min-height: 220px; // 加个最小高度防止太小
  }
}
</style>
